<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-12 23:06:46
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-20 20:21:47
-->
<template>
  <div class="Echarts-container" ref="echartsContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
const echartsContainer = ref(null);
onMounted(() => {
  const myChart = echarts.init(echartsContainer.value, "dark");
  let index = 0;
  const color = ["#1890FF", "#42d7b3"];
  const option = {
    title: {
      text: "新坏对比",
    },
    grid: {
      left: "7%",
      right: "7%",
      bottom: "5%",
      top: "17%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["4月", "5月", "6月", "7月", "8月", "9月"],
      //去除刻度
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "rgba(230, 247, 255, 0.50)",
        fontSize: 12,
      },
    },
    yAxis: {
      type: "value",
    },
    tooltip: {},
    legend: getLegend(),
    series: [
      {
        name: "投放车辆",
        data: [20, 80, 30, 40, 60, 50],
        type: "line",
        smooth: true,
        lineStyle: getLineStyle(color, index),
        areaStyle: getAreaStyle(index),
      },
      {
        name: "故障车辆",
        data: [20, 60, 20, 100, 38, 90],
        type: "line",
        smooth: true,
        lineStyle: getLineStyle(color, index),
        areaStyle: getAreaStyle(index),
      },
    ],
  };
  myChart.setOption(option);
});

const getLineStyle = (color, index) => {
  return {
    width: 3,
    shadowColor: color[index],
    shadowBlur: 20,
  };
};

const getAreaStyle = (index) => {
  let temp = index;
  index++;
  return {
    opacity: 1,
    //右下左上
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: temp === 0 ? "rgba(24, 144, 255, .5)" : "rgba(71, 176, 138, .5)",
      },
      {
        offset: 0.3,
        color: temp === 0 ? "rgba(24, 144, 255, .2)" : "rgba(71, 176, 138, .2)",
      },
      {
        offset: 1,
        color: temp === 0 ? "rgba(24, 144, 255, 0)" : "rgba(71, 176, 138, 0)",
      },
    ]),
  };
};

const getLegend = () => {
  return {
    data: ["投放车辆", "故障车辆"],
    icon: "rect",
    orient: "horizontal",
    left: "right",
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: "#fff",
      fontSize: "12px",
    },
  };
};
</script>
<style scoped>
.Echarts-container {
  height: 205px;
  padding: 10px;
}
</style>
